<template>
    <div class="menu-manager">
<!--        <div class="menu-manager-top">-->
<!--            <PageSearch :search-form-config="searchConfig" @queryBtnClick="searchResetHandler"/>-->
<!--        </div>-->
        <div class="menu-manager-table-div">
            <y-table :dataSource="tableDataSource" :columns="MENU_COLUMNS" :pagination="false">
                <template #title>
                    <div class="table-header">
                        <div>
                            <h3>菜单列表</h3>
                        </div>
                        <div>

                        </div>
                    </div>
                </template>

                <template #typeSlot="scope">
                    <template v-if="scope.scope.value === 0">
                        <a-tag color="success">{{'目录'}}</a-tag>
                    </template>
                    <template v-else-if="scope.scope.value === 1">
                        <a-tag color="blue">{{'菜单'}}</a-tag>
                    </template>
                    <template v-else-if="scope.scope.value === 2">
                        <a-tag color="red">{{'权限'}}</a-tag>
                    </template>

                </template>
                <template #iconSlot="scope">
                    <Icon :icon="scope.scope.value"/>
                </template>

                <template #operation="scope">
                    <div class="operation">
                        <a-button type="primary" shape="circle">
                            <template #icon>
                                <edit-outlined/>
                            </template>
                        </a-button>
                        <a-popconfirm
                            title="确定删除么?"
                            placement="bottom"
                            ok-text="确定"
                            cancel-text="取消"
                        >
                            <a-button type="primary" danger shape="circle">
                                <template #icon>
                                    <delete-outlined/>
                                </template>
                            </a-button>
                        </a-popconfirm>
                    </div>
                </template>
            </y-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import {IFormItem} from "@/base-ui/form";
import {ref} from "vue";
import {YFormConfig} from "@v/home/system/menu/config/search.config";
import PageSearch from "@c/page-search/index";

import {MENU_COLUMNS} from "@v/home/system/menu/config/content.config";
import {UserVO} from "@/apis/types";
import {QUERY_MY_MENU} from "@/apis/login-apis";
import YTable from "@/base-ui/table";
import {QUERY_ALL_MENU_BY_CONDITION} from "@/apis/menu-apis";
import {Icon} from "@c/base/Icon";

const tableDataSource = ref();

const searchConfig = ref({
    formItems: YFormConfig
})

const searchResetHandler = (formValue: any) => {
    console.log("formValue", formValue);
}

const queryMenuList = () => {
    QUERY_ALL_MENU_BY_CONDITION(null).then(res => {
        tableDataSource.value = res.data;
    })
}
queryMenuList()

// const searchModel = ref<searchFormType>({
//     key: "",
//     url: "",
//     createDate: "",
//     rangeDate: [],
//     time: "",
//     timeRange: [ ],
//     selects: [],
//     password: "",
//     status: false,
// })


</script>

<style scoped lang="less">
.menu-manager{
    background-color: #EFF2F5;
    display: flex;
    flex-direction: column;

    .menu-manager-top{
        padding: 15px 0;
        background-color: white;
        width: 100%;
    }

    .menu-manager-table-div{
        margin-top: 20px;
        background-color: white;
        width: 100%;
    }


}
.menu-manager-table-div{
    width: 100%;
    padding-top: 20px;

    .table-header{
        width: 100%;
        display: flex;
    }
}
</style>
